<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body
        {
            padding: 0;
            font-size: 10pt;
            behavior:url(css/csshover.htc);
        }
        .topmenu
        {
            display: block;
            width: 220px;
            border: 2px solid #e4393c;
            margin: 0;
            padding: 0;
            position: relative;
        }
        .toptitle
        {
            height: 40px;
            line-height: 40px;
            text-align: left;
            font-size: 11pt;
            font-weight: bold;
            color: White;
            background: #e4393c;
            padding-left: 20px;
        }
        .topmenu li
        {

            height: 30px;
            line-height: 30px;
            font-size: 11pt;
            list-style-type: none;
            text-align: left;
            padding-left: 8px;
            z-index: 3;

            /* 任务一 */

        }

        .topmenu li:hover
        {

            /* 任务二 */

        }

        .topmenu li a
        {
            text-decoration: none;
            color: #313131;
        }
        .topmenu li a:hover
        {
            text-decoration: underline;
            font-weight: bold;
            color: #e4393c;
        }
        .topmenu li:hover{
            border: 1px solid red;
            box-shadow: 0 0 8px #dddddd;

        }
        .topmenu li:hover .submenu{
            display: block;
        }
        .topmenu .submenu{
            display: none;
            width: 715px;
            height: 391px;
            position:absolute;
            left: 200px;
            top: 40px;
            border: 1px solid black;
            z-index: 5;
        }

    </style>
</head>
<body>

<div style="width: 500px; height: 35px; font-size: 25px; font-weight: 800; ">
    使用纯CSS实现京东二级菜单
</div>
<ul class="topmenu">
    <div class="toptitle">全部商品分类</div>

    <li><a href="#">图书、音像、数字商品</a><span></span>
        <div class="submenu">
            图书、音像、数字商品
        </div>
    </li>



    <li><a href="#">家用电器</a>
        <div class="submenu">
            家用电器
        </div>
    </li>

    <li><a href="#">手机、数码</a>
        <div class="submenu">
            手机、数码
        </div>
    </li>


    <li><a href="#">电脑、办公</a>
        <div class="submenu">
            电脑、办公
        </div>
    </li>


    <li><a href="#">家居、家具、家装、厨具</a>
        <div class="submenu">
            家居、家具、家装、厨具
        </div>
    </li>


    <li><a href="#">服饰内衣、珠宝首饰</a>
        <div class="submenu">
            服饰内衣、珠宝首饰
        </div>
    </li>


    <li><a href="#">个护化妆</a>
        <div class="submenu">
            个护化妆
        </div>
    </li>


    <li><a href="#">鞋靴、箱包、钟表、奢侈品</a>
        <div class="submenu">
            鞋靴、箱包、钟表、奢侈品
        </div>
    </li>


    <li><a href="#">运动户外</a>
        <div class="submenu">
            运动户外
        </div>
    </li>


    <li><a href="#">汽车用品</a>
        <div class="submenu">
            s汽车用品
        </div>
    </li>


    <li><a href="#">母婴、玩具乐器</a>
        <div class="submenu">
            母婴、玩具乐器
        </div>
    </li>


    <li><a href="#">食品饮料、酒类、生鲜</a>
        <div class="submenu">
            食品饮料、酒类、生鲜
        </div>
    </li>


    <li><a href="#">营养保健</a>
        <div class="submenu">
            营养保健
        </div>
    </li>
</ul>
</body>
</html>